<!--  -->
<template>
  <div class="search-history">
    <van-cell title="搜索历史" >
      <template #right-icon>
        <div v-if="isDeleteShow" class="deleteStatus">
          <span @click="clearSearchHistory">删除全部</span>
          <span @click="isDeleteShow=!isDeleteShow">完成</span>
        </div>
        <i v-else class="iconfont icon-shanchu" @click="isDeleteShow=!isDeleteShow"></i>
      </template>
    </van-cell>
    <van-cell
    v-for="(text,index) in searchHistoryText"
    :key="index" :title="text" @click="clickSearchHisrotyCell(text,index)" >
      <template #right-icon>
        <van-icon v-show="isDeleteShow" name="close" />
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    searchHistoryText: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      isDeleteShow: false // 控制删除按钮的显示
    }
  },
  methods: {
    // 点击历史记录列表项
    clickSearchHisrotyCell (text, index) {
      if (this.isDeleteShow) {
        this.$emit('delete-search-history', index) // 删除状态
      } else {
        this.$emit('search', text) // 非删除状态
      }
    },
    clearSearchHistory () {
      this.$dialog.confirm({
        title: '确认删除全部历史记录吗'
      }).then(() => {
        this.$emit('clear-search-history')
      })
      this.isDeleteShow = false
    }
  }
}
</script>

<style  scoped lang='less'>
.search-history {
    .van-cell {
      /deep/.deleteStatus {
        color: rgb(94, 83, 85);
        span:nth-child(1){
          color: rgb(23, 197, 209);
        }
        span:nth-child(2){
          color: rgb(173, 214, 24);
        }
        span+span {
          margin-left: 10px;
        }
      }
    }
  }
</style>
